<template>
    <div class="switch mt-1.9rem">
        <template v-for="(item, index) in menus" :key="index">
            <div class="switch-item" :class="{ 'switch-item-activate': item.key === active }" @click="setSwitch(item)">
                {{ item.name }}
            </div>
        </template>

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

interface Props {
    menus: { key: string, name: string }[];
}
interface Emits {
    /** Update siderCollapse */
    (e: 'change', val: string): void;
}

const emit = defineEmits<Emits>();
const props = withDefaults(defineProps<Props>(), {
    menus: () => []
});

const active = ref(props.menus[0].key);

function setSwitch(item: { key: string, name: string }) {
    active.value = item.key;
    emit('change', item.key);
}

</script>

<style lang="scss" scoped>
.switch {
    display: flex;

    height: 5.2rem;
    opacity: 1;
    border-radius: 2.3rem;
    background: #364A5E;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    line-height: 2rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
}

.switch-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.switch-item-activate {
    border-radius: 5.1rem;
    background: linear-gradient(90deg, #43FFFF 0%, #0978E9 100%);
}
</style>